html{
    height: 100%;
    width: 100%;    
}

body{
    height: 99%;
    width: 99%;    
}


.cs-div01{
    border: solid thin red;
    height: 99%;
    width: 99%;
}

.cs-div02{
    border: solid thin green;
    height: 100%;
    width: 10%;
}
.cs-div02-atop{
    border: solid thin silver;
    height: 32px;
    width: 99%;    
}
.cs-div02-comp1{
    border: solid thin black;
    height: 32px;
    width: 100px;   
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;   /*阻止选中文字*/  
}
.cs-div02-comp2{
    border: solid thin black;
    height: 32px;
    width: 100px; 
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;       
}

.cs-div03{
    border: solid thin green;
    height: 100%;
    width: 70%;
}
.cs-div03-atop{
    border: solid thin silver;
    height: 32px;
    width: 99%;    
}
.cs-div03-tararea{
    border: solid thin black;
    height: 90%;
    width: 99%;    
}

.cs-div04{
    border: solid thin blue;
    height: 100%;
    width: 20%;
}

/* ================ flex 常用样式 ：beg { */
	/* 纵向,对中,对中 */
    .flex-ccc{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
    }
	/* 纵向,末端,对中 */
    .flex-cfec{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
    }
	/* 纵向,起点,对中 */
    .flex-cfsc{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
    }
	/* 纵向,环绕,对中 */
    .flex-csac{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
        
    }
	/* 纵向,均隔,对中 */
    .flex-csbc{
		display: flex;
		flex-direction: column;
		justify-content:space-between;
		align-items: center;
    }
	
	
	/* 横向,对中,对中 */
    .flex-rcc{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
    }
	/* 横向,末端,对中 */
    .flex-rfec{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
    }
	/* 横向,起点,对中 */
    .flex-rfsc{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
    }
	/* 横向,环绕,对中 */
    .flex-rsac{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
        
    }
	/* 横向,均隔,对中 */
    .flex-rsbc{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
    }
    
/* ================ flex 常用样式 ：end } */
